<!--
 * @Descripttion: GGB
 * @version: 1.0
 * @Author: GGB
 * @Date: 2021-12-09 21:25:37
 * @LastEditors: GGB
 * @LastEditTime: 2021-12-11 11:38:10
-->
<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <!-- <img alt="Vue logo" src="/src/assets/logo.png" /> -->
  <Todos></Todos>
  <!-- vuex -->
  <p @click="$store.commit('add')">{{ $store.state.count }}</p>
  <!-- composition api -->
  <p @click="add">{{ count }}</p>
  <!-- 全局组件 -->
  <Comp />
  <!-- 加载异步组件 -->
  <AsyncComp />
  <!-- 自定义指令 -->
  <p v-highlight="'green'">我是自定义指令</p>
  <!-- 动画 -->
  <TransitionTest />
  <!-- 事件订阅 -->
  <button @click="sendMsg">发送消息</button>
  <!-- 路由 -->
  <!-- <router-view></router-view> -->
  <!-- 路由 keep-alive -->
  <router-view v-slot="{ Component }">
    <keep-alive>
      <component :is="Component"></component>
    </keep-alive>
  </router-view>
  <compts></compts>
</template>

<script>
import { useStore } from "vuex";
import { defineAsyncComponent, toRefs } from "vue";
import TransitionTest from "/comps/TransitionTest.vue";
import mitt from "mitt";
import Compts from "/comps/Compts.vue";
import Todos from "/comps/todos/Todos.vue";
export const emitter = mitt();
export default {
  name: "App",
  components: {
    AsyncComp: defineAsyncComponent(() => import("/comps/NextPage.vue")),
    TransitionTest,
    Compts,
    Todos,
  },
  methods: {
    sendMsg() {
      emitter.emit("sendMsg", "foo000");
    },
  },
  setup() {
    const store = useStore();
    // fetch("/api/users")
    //   .then(resp => resp.json())
    //   .then(data => {
    //     console.log(data);
    //   });
    return {
      // count: store.state.count,
      ...toRefs(store.state),
      add() {
        store.commit("add");
      },
    };
  },
};
</script>
